<template>
  <div>
    <div class="top">
      <div class="index-v3-card-row">
        <div class="index-v3-visitor-box">
          <div class="index-v3-visitor-card" style="">
            <div class="index-v3-visitor-count-wrap">
              <div class="index-v3-visitor-count">
                今日
                <mt-badge size="normal" color="#ff0000">{{ newVisitors }}</mt-badge>
              </div>
              <div class="index-v3-visitor-time">新访问</div>
            </div>
          </div>
        </div>
        <div class="index-v3-navigator-card_2" @click="getData">
          <div data-dpm="23.3.4.0" class="index-v3-navigator-card_2__item-wrap">
            <div class="index-v3-navigator-card_2__item">
              <div class="index-v3-navigator-card_2__item__icon index-v3-navigator-card__icon_card margin-left"></div>
              <div>
                好友历史阅读：
                <mt-badge size="normal">{{ historyNum }}</mt-badge>
              </div>
            </div>
          </div>
          <div data-dpm="23.3.11.0" class="index-v3-navigator-card_2__item-wrap">
            <div class="index-v3-navigator-card_2__item">
              <div class="index-v3-navigator-card_2__item__icon index-v3-navigator-card__icon_upload"></div>
              <div>
                好友历史转发：
                <mt-badge size="normal">{{ redirect }}</mt-badge>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="visitor.length == 0">暂时没有分享的文章，赶快去转发文章吧</div>
      <div class="content-item" v-if="visitor.length != 0" v-for="item in visitor" :key="item.id">
        <div class="article-preview">
          <div class="article-preview-avatar" @click="getArticle(item.articleId, item.userArticleId)" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
          <div class="article-preview-content" @click="getArticle(item.articleId, item.userArticleId)">
            <div class="article-preview-title">《{{ item.title }}》</div>
            <div class="article-preview-info">
              <font class="info-font margin-r">{{ timestampToTime(item.createTime) }}</font>
              <font class="info-font">阅读{{ item.readCount == null ? 0 : item.readCount }}次，</font>
              <font class="info-font">转发{{ item.redirect == null ? 0 : item.redirect }}次</font>
            </div>
          </div>
          <div class="img-pre" @click="changeShow(item.articleId)"><div class="icon-up"></div></div>
        </div>
      </div>

      <div class="wait" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <mt-spinner v-if="!end" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
        <font v-if="end">我是有底线的—————————————————</font>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import { Indicator } from 'mint-ui';
export default {
  name: 'Mytwo',
  data() {
    return {
      // activeNames: [],
      visitor: [],
      openid: '',
      busy: true,
      page: 1,
      end: false,
      newVisitors: 0,
      historyNum: 0,
      redirect: 0,
      show: true,
      popupVisible: false
    };
  },
  created() {
    if (!localStorage.getItem('openId')) {
      // 如果缓存localStorage中没有微信openId，则需用code去后台获取
      console.log('获取localStorage失败，准备获取code');
      this.getCode();
    } else {
      this.openid = localStorage.getItem('openId');
    }
    this.$axios
      .get('record/getVisitorInfo', {
        params: {
          openid: this.openid
        }
      })
      .then(res => {
        this.newVisitors = res.data.newVisitors;
        this.historyNum = res.data.history;
        this.redirect = res.data.redirect;
      })
      .catch(err => {
        console.log(err);
      });
    this.searchInfo(false);
  },
  methods: {
    changeShow(articleId) {
      // Indicator.open({
      //   text: '加载中...',
      //   spinnerType: 'fading-circle'
      // });
      this.$router.push({
        path: '/recordDetail',
        query: { articleId: articleId}
      });
    },
    getArticle: function(aid) {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      this.$axios
        .get('article/getArticle', {
          params: { articleId: aid, openid: this.openid }
        })
        .then(res => {
          Indicator.close();
          this.$router.push({
            path: '/articleDetail',
            query: { articleId: res.data.article.id, userArticleId: res.data.userArticleId, article: res.data.article }
          });
        })
        .catch(err => {
          console.log(err);
        });
      setTimeout(() => {
        Indicator.close();
      }, 10000);
    },
    getData: function() {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      setTimeout(() => {
        Indicator.close();
      }, 10000);
      this.$router.push({ name: 'myData' });
    },
    getCode: function() {
      // 非静默授权，第一次有弹框
      this.code = '';
      var local = window.location.href; // 获取页面url
      var appid = 'wxe68aaf0c3fe0e629';
      this.code = this.getUrlCode().code; // 截取code
      console.log('截取code' + this.code);
      if (this.code == null || this.code === '') {
        // 如果没有code，则去请求
        window.location.href =
          'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
          appid +
          '&redirect_uri=' +
          encodeURIComponent(local) +
          '&response_type=code&scope=snsapi_userinfo#wechat_redirect';
      } else {
        var that = this;
        $.ajax({
          url: 'https://yokapp.mynatapp.cc/wechat/getInfo',
          type: 'GET',
          async: false,
          data: { code: that.code },
          success: function(data) {
            console.log('getInfo成功' + data);
            localStorage.setItem('openId', data.openId);
            localStorage.setItem('nickname', data.nickname);
            localStorage.setItem('headImgUrl', data.headImgUrl);
            that.openid = data.openId;
            console.log('设置localStorage成功');
          },
          error: function(xhr, textStatus) {
            console.log('getInfo失败' + textStatus);
          }
        });
      }
    },
    getUrlCode: function() {
      // 截取url中的code方法
      var url = location.search;
      // this.winUrl = url;
      var theRequest = new Object();
      if (url.indexOf('?') != -1) {
        var str = url.substr(1);
        var strs = str.split('&');
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
        }
      }
      return theRequest;
    },
    searchInfo(flag) {
      this.$axios
        .get('record/getShare', {
          params: {
            openid: this.openid,
            page: this.page
          }
        })
        .then(res => {
          if (flag) {
            for (let j = 0; j < res.data.length; j++) {
              this.visitor.push(res.data[j]);
            }
            if (res.data != false && res.data.length>=10) {
              //还有数据
              this.busy = false;
              console.log('还有数据，开启busy');
            } else {
              this.busy = true; // 将无限滚动关闭
              this.page = 0; // 页数变为0
              this.end = true;
              console.log('没有数据，关闭busy');
            }
          } else {
            this.visitor = res.data;
            this.busy = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    loadMore: function() {
      this.busy = true; // 将无限滚动给禁用
      setTimeout(() => {
        this.page++; // 增加页数
        this.searchInfo(true);
      }, 200);
    },
    timestampToTime: function(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '年';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
      var D = date.getDate() + '日';
      var h = date.getHours();
      var m = date.getMinutes();
      if (parseInt(h) < 10) {
        h = '0' + h;
      }
      h = h + ':';
      if (parseInt(m) < 10) {
        m = '0' + m;
      }
      return Y + M + D + h + m;
    }
  }
};
</script>

<style scoped>
.zanwu {
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.imgfor {
  width: 70px;
  height: 70px;
  float: left;
}
.itemfor {
  display: inherit;
  height: 80px;
  width: 400px;
}
.margin-r {
  margin-right: 15px;
}
.inline {
  display: inline;
  overflow: scroll;
  max-height: 700px;
  margin-top: 40px;
}
.vtext {
  height: 50px;
  font-size: 18px;
  width: 320px;
  margin-left: 10px;
  float: left;
  margin-top: 12px;
}
.img-pre {
}

.icon-up {
  background-image: url(../../assets/pictures/查看.png);
  background-size: 100% 100%;
  width: 24px;
  height: 24px;
  margin-top: 20px;
}
.img-cont {
  width: 30px;
  margin-top: 20px;
  margin-left: 10px;
}
.info-font {
  color: #999;
  font-size: 13px;
}
.margin-left {
  margin-left: 10px;
}
.top {
  margin-bottom: 55px;
}

.content-item {
  position: relative;
  margin: 0 5px;
}

.article-preview {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0;
  background: #fff;
  border-bottom: 1px solid hsla(0, 0%, 92.9%, 0.5);
}

.article-preview-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 5px;
}

.article-preview-info {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  /* display: flex; */
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 7px;
}

.article-preview-avatar {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  border-radius: 1px;
  width: 100px;
  height: 70px;
}

.wait {
  color: #2c3e50;
  font-size: 20px;
  margin-inline: 20px;
  margin-top: 10px;
}

.index-v3-card-row {
  margin-bottom: 0;
}
.index-v3-card-row,
.index-v3-visitor-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.index-v3-visitor-box {
  background: #f6f6f8;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}

.index-v3-visitor-card {
  width: 320px;
  height: 96px;
  padding-top: 2px;
  margin: 0px 0px 0px 10px;
}

.index-v3-visitor-count-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-inline: 18px;
  margin-top: 30px;
}
.index-v3-visitor-count,
.index-v3-visitor-time {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333;
  font-size: large;
}

.index-v3-navigator-card_2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.index-v3-navigator-card_2__item-wrap {
  margin-bottom: 2px;
}
.index-v3-navigator-card_2__item {
  background: #f6f6f8;
  border-radius: 2px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 208px;
  height: 48px;
  margin-left: 2px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-size: 13px;
  font-weight: 500;
  color: #333;
}

.index-v3-navigator-card__icon_card {
  width: 32px;
  height: 32px;
  margin-right: 7px;
  background-image: url(../../assets/pictures/history.png);
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
}

.index-v3-navigator-card_2__item__icon {
  margin-right: 13px;
  background-size: 100% 100%;
}

.index-v3-navigator-card__icon_upload {
  width: 42px;
  height: 34px;
  margin-right: 7px;
  background-image: url(../../assets/pictures/转发.png);
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
}
</style>
